<template>
  <div class="total_data">
        <div class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="car" />
            <div class="small_title">加盟车总量</div>
          </div>
          <div class="second_line c_flex">
            {{total_data.cars_count}}
          </div>
        </div>
        <div class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="new_car" />
            <div class="small_title">新增加盟车</div>
          </div>
          <div class="second_line c_flex">
            {{total_data.cars_new_count}}
          </div>
        </div>
        <div class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="result" />
            <div class="small_title">业绩统计(加盟商)</div>
          </div>
          <div class="second_line c_flex">
            {{total_data.franchisees_amount_sum}}
           
          </div>
        </div>
        <div class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="static" />
            <div class="small_title">业绩总计(加盟车)</div>
          </div>
          <div class="second_line c_flex">
             {{total_data.cars_amount_sum}}
          </div>
        </div>
        <div @click="sign_list" class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="contract" />
            <div class="small_title">合约到期</div>
          </div>
          <div class="second_line c_flex">
            {{total_data.franchisees_expire_count}}
          </div>
        </div>
        <div @click="wait_devide" class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="reply" />
            <div class="small_title">待分配</div>
          </div>
          <div class="second_line c_flex">
             {{total_data.unassigned_franchisees_count}}
          </div>
        </div>
        <div @click="wait_devide" class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="reply" />
            <div class="small_title">加盟商30天营业额</div>
          </div>
          <div class="second_line c_flex">
             {{total_data.franchisees_amount_time_sum }}
          </div>
        </div>
        <div @click="wait_devide" class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="reply" />
            <div class="small_title">加盟车30天营业额</div>
          </div>
          <div class="second_line c_flex">
             {{total_data.cars_amount_time_sum }}
          </div>
        </div>
        <div @click="wait_devide" class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="reply" />
            <div class="small_title">加盟商总数</div>
          </div>
          <div class="second_line c_flex">
             {{total_data.franchisees_count}}
          </div>
        </div>
        <div @click="wait_devide" class="a">
          <div class="first_line">
            <svg-icon class-name="small_icon" icon-class="reply" />
            <div class="small_title">新增加盟商</div>
          </div>
          <div class="second_line c_flex">
             {{total_data.franchisees_new_count}}
          </div>
        </div>

      </div>
</template>

<script>
import {HomeService} from "@/api"
export default {
  name: 'totalData',
  mounted () {
    HomeService.getTotal().then(res=>{
      this.total_data = res.data
    })
  },
  data() {
    return {
      total_data: {}
    }
  },
  methods: {
    sign_list() {
      this.$emit("signList");
    },
    wait_devide(){
      this.$emit("wait_devide");
    }
  },
}
</script>

<style lang="less" scoped>
.total_data {
      background-color: #ffffff;
      width: 702px;
      height: 842px;
      margin-top: 70px;
      border: none;
      border-radius: 16px;
      display: grid;
      padding-left: 32px;
      padding-top: 37px;
      grid-row-gap: 42px;
      grid-column-gap: 78px;
      grid-template-columns: 280px 280px;
      grid-template-rows: 114px 114px 114px;
      grid-template-areas: 'a a'
        'a a'
        'a a';

      .a {

        background-color: #ffffff;

        .first_line {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .small_icon {
            width: 30px;
            height: 30px;
            display: inline-block;
          }

          .small_title {
            margin-left: 8px;
            height: 36px;
            line-height: 36px;
            color: rgba(51, 51, 51, 1);
            font-size: 26px;
            display: inline-block;
            font-weight: 200;
          }
        }

        .second_line {
          margin-top: 22px;
          width: 280px;
          height: 60px;
          background-color: rgba(243, 245, 247, 1);
          border-radius: 16px;
          font-size:28px;
        }

        // background-color:blue;
      }

    }
</style>